<!-- 夏季工装 -->
<!-- <template>
	<view class="content">
		<view class="fixTab" @click="toOrders()"> 我的订单 </view>
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :dots-styles="dotsStyles">
			<swiper class="top-img" :indicator-dots="false" :autoplay="false" :duration="500" @change="swiperChange">
				<swiper-item v-for="item in info">
					<image :src="item.content" mode=""></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="detail">
			<view class="goods-price">
				<view v-if="isDiscount" class="discount">
					<view class="left">
						<view> 折扣价￥<span>{{preferentialPrice}}</span>
							<view>{{discount}}折</view>
						</view>
						<view class="discount-line"> 价格￥{{amount}} </view>
					</view>
					<view class="right">
						<view>
							<image src="https://images.linglinggong.net/XCX/gongzhuang/time.png" mode=""></image>限时折扣
						</view>
						<view> 折扣还有 {{discountGoodsTime}} 结束</view>
					</view>
				</view>
				<view v-else class="undiscount">
					<span>价格￥</span><span>{{amount}}</span>
				</view>
			</view>
			<view class="goods-title">
				<view v-if="isDiscount"> 找零工春夏季短T工装 </view>
				<view v-else> 现货 找零工春夏季短T工装 </view>
			</view>
		</view>
		<view class="buttom">
			<view class="title">
				<view></view>商品详情<view></view>
			</view>
			<view class="buttom-img">
				<image src="https://images.linglinggong.net/XCX/gongzhuang/detail.jpg" mode=""></image>
			</view>
			<view class="btn-bg">
				<view class="btn" @click="showAddress()"> 立即购买 </view>
			</view>
		</view>
		<view class="mask" @touchmove.prevent v-if="isAddress">
			<view class="inner">
				<image @click="closeAddress" class="closeAddress"
					src="https://images.linglinggong.net/XCX/gongzhuang/closeAddress.png" mode="">
				</image>
				<view class="title"> 添加收件地址 </view>
				<view class="item">
					<span>收货人</span>
					<input v-model="name" placeholder="请输入收货人姓名" placeholder-style="color:#A5A5A5" maxlength="10"
						type="text">
				</view>
				<view class="item">
					<span>手机号</span>
					<input v-model="phone" placeholder="请输入收货人手机号" placeholder-style="color:#A5A5A5" maxlength="11"
						type="text">
				</view>
				<view class="item">
					<span>地址</span>
					<view class="item-address">
						<AddressPicker style="width: 380rpx;" @change="change" :level="3">{{planLocate}}
						</AddressPicker>
						<uni-icons type="forward" size="18"></uni-icons>
					</view>
				</view>
				<view class="item">
					<span>详细地址</span>
					<input v-model="addressDetail" placeholder="如街道、门牌号等" placeholder-style="color:#A5A5A5" type="text">
				</view>
				<view class="confirm" @click="submit()"> 确认 </view>
			</view>
		</view>
		<u-popup :show="isShowSize" ref="popup" type="bottom">
			<view class="order-detail">
				<view class="top">
					<view class="head">
						<view></view>
						<view class="title"> 确认订单 </view>
						<view class="icon" @click="iconshow">
							<u-icon name="close"></u-icon>
						</view>
					</view>
					<view class="userinfo">
						<view class="left">
							<view class="user">
								<span>{{name}}</span>
								<span>{{phone}}</span>
							</view>
							<view class="user-address">
								{{wholeAddress}} 
							</view>
						</view>
						<view class="right">
							<uni-icons @click="editAddress()" type="forward" size="24"></uni-icons>
						</view>
					</view>
					<view class="address-line">
						<image src="https://images.linglinggong.net/XCX/gongzhuang/address-line.png" mode=""></image>
					</view>
				</view>
				<view class="center">
					<view class="price"> <span>￥{{price}}</span>
						<view class="zhe" v-show="isDiscount">{{discount}}折</view>
					</view>
					<view class="buy-num">
						<image @click="sub()" src="https://images.linglinggong.net/XCX/gongzhuang/reduce.png" mode="">
						</image>
						<span>{{num}}</span>
						<image @click="add()" src="https://images.linglinggong.net/XCX/gongzhuang/add.png" mode="">
						</image>
					</view>
					<view class="select-size"> 已选择: <span>{{selectGoods}}</span> </view>
				</view>
				<view class="buttom">
					<view class="big-title">规格</view>
					<view class="size-list">
						<view @click="selectSize(item,index)" :class="[currentIndex==index?'active':'','size-item'] "
							v-for="(item,index) in sizeList">
							{{item.name}}
						</view>
					</view>
					<view class="pay" @click="pay()"> 立即购买￥{{price*100*num/100}} </view>
				</view>
			</view>
		</u-popup>
		<ChangePay @closePayPage='closePayPage' v-if="isOpenModal" title='支付' :monery='(price*num).toFixed(2)'
			:url="`/t/user/purchase_clothing`" keyWorld='commodityPrice' :contnet="contnet" isJson='1' buycode=1
			@paySuccess='paySuccess'>
		</ChangePay>
	</view>
</template>
<script>
	import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue"
	export default {
		data() {
			return {
				isAddress: false,
				name: '',
				addressDetail: '',
				phone: '',
				planLocate: "浙江省-金华市-义乌市",
				wholeAddress: '', //完整地址
				num: 1, //购买数量
				isDiscount: false, // 工装是否折扣
				preferentialPrice: '', // 打折后的价格
				amount: '', // 未打折的价格
				price: '', // 打折后的价格或未打折的价格
				discount: '', // 打几折
				discountExpirationTime: '', //促销截止时间
				sizeList: [{
					id: 1,
					name: 'S 85-100斤 2件'
				}, {
					id: 2,
					name: 'M 100-110斤 2件'
				}, {
					id: 3,
					name: 'L 110-120斤 2件'
				}, {
					id: 4,
					name: 'XL 120-135斤 2件'
				}, {
					id: 5,
					name: 'XXL 135-150斤 2件'
				}, {
					id: 6,
					name: 'XXXL 150-175斤 2件'
				}, {
					id: 7,
					name: 'XXXXL 175-200斤 2件'
				}],
				currentIndex: 0,
				selectGoods: '', // 选中的尺码
				isOpenModal: false, // 是否打开支付弹窗
				focus: false, //键盘输入焦点
				isShowPassWordAnimation: false, //密码错误执行动画
				codeArr: [], //密码
				codeIndex: 1,
				ranges: [1, 2, 3, 4, 5, 6],
				isShowForgetPassword: false, //是否弹出忘记密码
				payType: 2, // 余额支付
				payPwd: '',
				info: [{
					content: 'https://images.linglinggong.net/XCX/gongzhuang/5.png'
				}, {
					content: 'https://images.linglinggong.net/XCX/gongzhuang/2.png'
				}, {
					content: 'https://images.linglinggong.net/XCX/gongzhuang/3.png'
				}, {
					content: 'https://images.linglinggong.net/XCX/gongzhuang/4.png'
				}],
				current: 0,
				mode: 'default',
				dotsStyles: {},
				discountGoodsTime: '',
				isShowModal: false,
				goodsObj: {},
				contnet: {},
				timer: '',
				isShowSize: false,
			};
		},
		components: {
			AddressPicker,
		},
		watch: {
			isDiscount: {
				handler(newIsDiscount, oldIsDiscount) {
					if (!newIsDiscount) {
						this.price = this.amount
					} else {
						this.price = this.preferentialPrice
					}
				}
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		onShow() {
			this.getPrice()
		},
		methods: {
			// 付款成功
			paySuccess() {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/syncAppNewPage/buy-clothing/buy-success/buy-success'
					})
				}, 300)
			},
			// 关闭付款
			closePayPage() {
				this.isOpenModal = false
			},
			add() {
				this.num++
			},
			sub() {
				if (this.num > 1) {
					this.num--
				}
			},
			async getPrice() {
				let res = await this.$fetch(this.$api.obtain_tooling_prices, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.amount = res.data.amount
				this.preferentialPrice = res.data.preferentialPrice
				this.discount = Number(res.data.discounts) / 10
				this.discountExpirationTime = res.data.discountExpirationTime
				this.setTime()
				this.timer = setInterval(() => {
					this.setTime()
				}, 1000)
				if (this.isDiscount) {
					this.price = this.preferentialPrice
				} else {
					this.price = this.amount
				}
			},
			//倒计时
			setTime() {
				if (!this.discountExpirationTime) {
					return
				}
				let oldtIME = new Date(this.discountExpirationTime).getTime()
				let timestemp = parseFloat(oldtIME) //开工时间
				let timestempday = parseFloat((new Date()).getTime()); //当前时间
				let leftTime = parseFloat(timestemp - timestempday);
				if (leftTime >= 0) {
					this.isDiscount = true;
					let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
					let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
					let m = Math.floor(leftTime / 1000 / 60 % 60);
					let s = Math.floor(leftTime / 1000 % 60);
					if (d >= 1) {
						this.discountGoodsTime = d + '天'
					} else if (d < 1) {
						this.discountGoodsTime = h + '时'
						if (h < 1) {
							this.discountGoodsTime = m + '分' + s + '秒'
						}
					}
				} else {
					this.discountExpirationTime = '';
					this.isDiscount = false;
				}
			},
			// 滑动指示点
			swiperChange(e) {
				this.current = e.detail.current;
			},
			toOrders() {
				uni.navigateTo({
					url: '/pages/syncAppNewPage/buy-clothing/order-message/order-message'
				})
			},
			closeAddress() {
				this.isAddress = false
			},
			showAddress() {
				
				if (uni.getStorageSync('addressObj')) {
					let a = uni.getStorageSync('addressObj').planLocate.split('-').join('')
					this.wholeAddress = a + uni.getStorageSync('addressObj').addressDetail
					this.name = uni.getStorageSync('addressObj').name
					this.phone = uni.getStorageSync('addressObj').phone
					this.selectGoods = this.sizeList[0].name
					this.addressDetail = uni.getStorageSync('addressObj').addressDetail
					this.currentIndex = 0
					this.isShowSize = true
				} else {
					this.name = ''
					this.phone = ''
					this.planLocate = '浙江省-金华市-义乌市'
					this.addressDetail = ''
					this.currentIndex = 0
					this.isAddress = true
				}
			},
			change(result) {
				console.log(JSON.stringify(result.data));
				this.planLocate = ''
				result.data.forEach((item, index) => {
					if (index === 0) {
						this.planLocate += item.name
					} else {
						this.planLocate += '-' + item.name
					}
				})
				let arr = this.planLocate.split('-');
				console.log(arr)
			},
			submit() {
				if (!this.name.trim()) {
					uni.showToast({
						title: "请输入收货人姓名",
						icon: 'none'
					})
				} else if (!(/^[1][3456789][0-9]{9}$/.test(this.phone))) {
					uni.showToast({
						title: "手机号码有误，请重填",
						icon: 'none'
					})
				} else if (this.planLocate == "请选择地址") {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none'
					})
				} else if (!this.addressDetail.trim()) {
					uni.showToast({
						title: "请输入详细地址",
						icon: 'none'
					})
				} else {
					var addressObj = {
						name: this.name,
						phone: this.phone,
						planLocate: this.planLocate,
						addressDetail: this.addressDetail
					}
					uni.setStorageSync('addressObj', addressObj)
					let a = this.planLocate.split('-').join('')
					this.wholeAddress = a + this.addressDetail
					this.isAddress = false
					this.selectGoods = this.sizeList[0].name
					this.isShowSize = true
				}
			},
			iconshow() {
				this.isShowSize = false
			},
			selectSize(item, index) {
				this.currentIndex = index
				this.selectGoods = this.sizeList[index].name
			},
			editAddress() {
				this.isShowSize = false
				setTimeout(() => {
					this.isAddress = true
				}, 500)
			},
			pay() {
				this.isShowSize = false
				this.contnet = {
					consignee: this.name,
					phonenumber: this.phone,
					address: this.planLocate.split('-').join(''),
					detailedAddress: this.addressDetail,
					productId: '',
					tradeName: this.selectGoods,
					productSpecifications: this.selectGoods,
					commodityPrice: this.price,
					purchaseQuantity: this.num,
					expressCompany: '',
					trackingNumber: '',
					notes: ''
				}
				this.isOpenModal = true
				this.focus = true
			},
			handleCloseModal() {
				this.isOpenModal = false
				this.payPwd = ''
				this.codeArr = []
				this.codeIndex = 1
			},
			emptyInput() {
				this.isShowPassWordAnimation = true
				this.isShowForgetPassword = true
				this.payPwd = ''
				this.codeArr = []
				this.codeIndex = 1
				setTimeout(() => {
					this.isShowPassWordAnimation = false
				}, 1200)
			},
			// getPayCode(e) {
			// 	let {
			// 		value
			// 	} = e.detail
			// 	let del = false
			// 	this.payPwd = value
			// 	if (value.length < this.codeArr.length) {
			// 		del = true
			// 	}
			// 	this.codeArr.length = value.length
			// 	this.codeArr.fill("●")
			// 	this.codeIndex = this.codeArr.length + 1
			// 	if (del) {
			// 		return
			// 	}
			// 	this.codeArr[value.length - 1] = value[value.length - 1]
			// 	setTimeout(() => {
			// 		if (this.codeArr.length != 0) {
			// 			this.$set(this.codeArr, [this.codeArr.length - 1], "●")
			// 		}
			// 	}, 1000)
			// 	if (this.codeIndex == 7) {
			// 		this.handleComfirmPay()
			// 	}
			// 	console.log('codeArr', this.codeIndex, this.codeArr)
			// },
			// //点击链接至账户安全。
			// toRePasssWord() {
			// 	uni.navigateTo({
			// 		url: '/pages/account-security/account-security'
			// 	})
			// },
			// async handleComfirmPay() {
			// 	console.log('钱包支付确认', this.$api.purchase_clothing)
			// 	let res = await this.$fetch(
			// 		`${this.$api.purchase_clothing}?payType=${this.payType}&payPwd=${this.payPwd}`, {
			// 			consignee: this.name,
			// 			phonenumber: this.phone,
			// 			address: this.planLocate.split('-').join(''),
			// 			detailedAddress: this.addressDetail,
			// 			productId: '',
			// 			tradeName: this.selectGoods,
			// 			productSpecifications: this.selectGoods,
			// 			commodityPrice: this.price,
			// 			purchaseQuantity: this.num,
			// 			expressCompany: '',
			// 			trackingNumber: '',
			// 			notes: ''
			// 		}, 'POST', 'JSON')
			// 	console.log('钱包支付确认', res)
			// 	if (res.code) {
			// 		this.emptyInput()
			// 		uni.showToast({
			// 			title: res.msg,
			// 			icon: 'none'
			// 		})
			// 		return
			// 	} else {
			// 		this.isOpenModal = false
			// 		this.handleCloseModal()
			// 		uni.showToast({
			// 			title: '购买成功~',
			// 			icon: 'none'
			// 		})
			// 		setTimeout(() => {
			// 			uni.navigateTo({
			// 				url: '/pages/buy-clothing/buy-success/buy-success'
			// 			})
			// 		}, 300)
			// 	}
			// },
		},
	}
</script>
<style lang="less" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		height: 100%;
		color: #262626;
		background: #fff;
		overflow-x: hidden;

		.fixTab {
			position: fixed;
			top: 0rpx;
			right: 0;
			z-index: 999;
			height: 68rpx;
			line-height: 68rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, .7);
			border-radius: 36rpx 0rpx 0rpx 36rpx;
			padding: 0 30rpx;
		}

		.top-img {
			width: 100%;
			height: 636rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.detail {
			.goods-price {
				.discount {
					width: 100%;
					height: 136rpx;
					background: url('https://images.linglinggong.net/XCX/gongzhuang/discount.png') no-repeat top center;
					background-size: cover;
					color: #fff;
					display: flex;
					justify-content: space-between;
					padding: 15rpx 30rpx;
					box-sizing: border-box;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						view:nth-child(1) {
							font-size: 28rpx;
							display: flex;
							align-items: center;

							span:nth-child(1) {
								font-size: 48rpx;
								font-weight: bold;
							}

							view {
								width: 120rpx;
								height: 40rpx;
								line-height: 40rpx;
								text-align: center;
								border-radius: 30rpx;
								background: #fff;
								color: #FE4538;
								margin-left: 10rpx;
							}
						}

						.discount-line {
							text-decoration: line-through;
						}
					}

					.right {
						color: #FE4538;
						text-align: right;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						view:nth-child(1) {
							font-size: 36rpx;
							font-weight: bold;
							display: flex;
							justify-content: end;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 10rpx;
								align-self: center;
							}
						}

						view:nth-child(2) {
							background: rgba(255, 255, 255, 0.85);
							height: 50rpx;
							font-size: 20rpx;
							line-height: 50rpx;
							border-radius: 6rpx;
							text-align: center;
							padding: 0 20rpx;
						}
					}
				}

				.undiscount {
					height: 56rpx;
					width: 100%;
					padding: 20rpx 30rpx 0rpx 30rpx;
					line-height: 56rpx;
					color: #F85A41;
					font-size: 28rpx;
					font-weight: bold;

					span:nth-child(2) {
						font-size: 40rpx;
					}
				}
			}

			.goods-title {
				width: 100%;
				height: 104rpx;
				background: #fff;
				padding: 30rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				color: #262626;
			}
		}

		.buttom {
			height: 4140rpx;

			.title {
				font-size: 24rpx;
				color: #999999;
				background: #F1F1F5;
				height: 94rpx;
				font-weight: bold;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				view {
					width: 30rpx;
					height: 2rpx;
					background: #CCCCCC;
					margin: 0 20rpx;
				}
			}

			.buttom-img {
				width: 690rpx;
				height: 3850rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.btn-bg {
				width: 100%;
				background: #fff;
				position: fixed;
				bottom: 0rpx;

				.btn {
					width: 690rpx;
					height: 88rpx;
					margin: 10rpx 30rpx;
					margin-bottom: 60rpx;
					font-size: 36rpx;
					font-weight: bold;
					text-align: center;
					line-height: 88rpx;
					color: #333333;
					background: #FCC928;
					border-radius: 12rpx;
				}
			}
		}

		.mask {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .5);
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;

			.inner {
				width: 630rpx;
				height: 804rpx;
				padding: 40rpx 30rpx;
				background: #fff;
				border-radius: 24rpx;
				position: relative;

				.closeAddress {
					width: 72rpx;
					height: 72rpx;
					position: absolute;
					right: -36rpx;
					top: -36rpx;
				}

				.title {
					font-size: 40rpx;
					color: #262626;
					font-weight: bold;
					text-align: center;
					margin-bottom: 20rpx;
				}

				.item {
					height: 120rpx;
					font-size: 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #E4E4E4;

					.item-address {
						width: 65%;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					span {
						color: #1A1A1A;
						font-weight: bold;
					}

					input {
						width: 65%;
						height: 50rpx;
					}
				}

				.confirm {
					width: 630rpx;
					height: 88rpx;
					font-size: 36rpx;
					position: absolute;
					bottom: 60rpx;
					font-weight: bold;
					text-align: center;
					line-height: 88rpx;
					background: #FCC928;
					border-radius: 12rpx
				}
			}
		}

		.order-detail {
			width: 100%;
			height: 1340rpx;
			box-sizing: border-box;
			background: #F1F1F5;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			position: relative;

			.top {
				width: 100%;
				height: 364rpx;
				padding: 50rpx 30rpx;
				background: #fff;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				box-sizing: border-box;
				position: relative;

				.head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 50rpx;

					.title {
						font-size: 40rpx;
						font-weight: bold;
					}

					.icon {}
				}

				.userinfo {
					width: 100%;
					height: 180rpx;
					display: flex;
					justify-content: space-between;
					padding: 14rpx 0;

					.left {
						width: 606rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.user {
							span {
								margin-right: 30rpx;
							}
						}
					}

					.right {
						align-self: center;

						image {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.address-line {
					position: absolute;
					bottom: 24rpx;
					left: 0;
					width: 100%;
					height: 8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.center {
				width: 100%;
				height: 236rpx;
				margin-top: 20rpx;
				background: #fff;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.price {
					color: #F85A41;
					font-size: 48rpx;
					font-weight: bold;
					display: flex;
					align-items: center;

					.zhe {
						font-size: 20rpx;
						height: 32rpx;
						padding: 0 16rpx;
						margin-left: 10rpx;
						line-height: 32rpx;
						text-align: center;
						font-weight: normal;
						color: #fff;
						background-color: #F85A41;
						border-radius: 16rpx;
					}
				}

				.buy-num {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 30rpx;
						margin-left: 5rpx;
					}

					span {
						margin-right: 30rpx;
					}
				}

				.tabs {
					span {
						height: 36rpx;
						padding: 0 15rpx;
						color: #F85A41;
						border: 2rpx solid #F85A41;
						border-radius: 6rpx;
						margin-right: 12rpx;
					}
				}

				.select-size {
					span {
						font-weight: bold;
						margin-left: 20rpx;
					}
				}

				.num {
					display: flex;
					align-items: center;

					span {
						margin-right: 30rpx;
					}

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 30rpx;
					}
				}
			}

			.buttom {
				width: 100%;
				height: 700rpx;
				background: #fff;
				margin-top: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				position: relative;

				.big-title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.size-list {
					margin-top: 30rpx;
					display: flex;
					justify-content: start;
					flex-wrap: wrap;

					.size-item {
						height: 56rpx;
						padding: 10rpx 30rpx;
						border-radius: 6rpx;
						background: #F1F1F5;
						text-align: center;
						line-height: 56rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}

					.active {
						background: #FCC928;
					}
				}

				.pay {
					width: 690rpx;
					height: 88rpx;
					font-size: 36rpx;
					position: absolute;
					bottom: 60rpx;
					font-weight: bold;
					text-align: center;
					line-height: 88rpx;
					background: #FCC928;
					border-radius: 12rpx
				}
			}
		}

		.share-modal {
			z-index: 11;
			position: fixed;
			bottom: 0;
			height: 100vh;
			width: 100vw;
			background-color: rgba(0, 0, 0, 0.40);
			display: flex;
			align-items: center;
			justify-content: center;

			&>.main {
				position: relative;
				top: -100rpx;
				width: 570rpx;
				// height: 250rpx;
				padding: 30rpx;
				background: #FFFFFF;
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
				border-radius: 17px;
				line-height: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				&>.modal-title {
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 20rpx;

					// margin: 30rpx 0 50rpx;
					&>.imgs {
						position: relative;

						image {
							position: absolute;
							top: 0rpx;
							bottom: 0;
							right: -80rpx;
							width: 50rpx;
							height: 40rpx;
						}
					}
				}

				.modal-content {
					width: 100%;
					height: 240rpx;

					// border: 1px solid;
					.modal-content-line {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 30rpx 30rpx;
					}

					.modal-content-money {
						width: 100%;
						height: 100rpx;
						margin-top: -10rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						// border:1px solid;
						.rmb {
							font-size: 40rpx;
							color: #333333;
							margin-right: 10rpx;
							font-weight: 600;
							margin-top: 15rpx;
						}

						.rmb-num {
							font-size: 66rpx;
							color: #333333;
							font-weight: 600;
						}
					}

					.modal-content-type {
						width: 92%;
						margin: 0 auto;
						height: 80rpx;
						// border: 1px solid;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.modal-content-type-left {}

						.modal-content-type-right {
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 40rpx;
								height: 100%;
							}

							text {
								margin-left: 6rpx;
								color: #333333;
								font-size: 26rpx;
							}
						}
					}
				}

				&>.pay-code {
					padding-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					position: relative;

					&>input {
						position: absolute;
						top: 0;
						left: -100%;
						width: 200%;
						height: 100%;
						text-align: left;
						z-index: 9;
						opacity: 1;
					}

					&>.box {
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						width: 80rpx;
						height: 80rpx;
						margin-right: 10rpx;
						font-size: 22px;
						line-height: 90rpx;
						box-sizing: border-box;
						background-color: #F2F2F2;
						border-radius: 2px;

						&:last-child {
							margin-right: 0;
						}
					}

					&>.active {
						border: 2rpx solid #cccccc;

						@keyframes twinkling {
							0% {
								opacity: 0.1;
							}

							50% {
								opacity: 0.8;
							}

							100% {
								opacity: 0.1;
							}
						}

						&>.line {
							display: block;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 2upx;
							height: 40upx;
							background: #333333;
							animation: twinkling 1s infinite ease;
						}
					}
				}

				.repwd {
					height: 62rpx;
					margin-bottom: -30rpx;
					font-size: 24rpx;
					color: #999999;
					// border: 1px solid;
					width: 92%;
					margin: 0 auto;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}

				&>.button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 180rpx;
					height: 70rpx;
					margin-top: 60rpx;
					border-radius: 50rpx;
					background-color: #FCC928;

					&:active {
						opacity: 0.7;
					}
				}

				&>.close {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		.errorpw {
			animation: swing 1s .15s linear 1;
		}

		@keyframes swing {

			10%,
			90% {
				transform: translate(-4rpx, 0);
			}

			20%,
			80% {
				transform: translate(+4rpx, 0);
			}

			30%,
			70% {
				transform: translate(-6rpx, 0);
			}

			40%,
			60% {
				transform: translate(+6rpx, 0);
			}

			50% {
				transform: translate(-8rpx, 0);
			}
		}
	}
</style> -->
<!-- 秋季工装 -->
<template>
	<view class="content">
		<view class="fixTab" @click="toOrders()"> 我的订单 </view>
		<view class="fixBannerNum">
			{{current+1}}/8
		</view>
		<!-- <uni-swiper-dot :info="info" field="content" :mode="mode" :dots-styles="dotsStyles"> -->
		<swiper class="top-img" :indicator-dots="false" :autoplay="false" :duration="500" @change="swiperChange"
			:current="current">
			<swiper-item v-for="item in info">
				<image :src="item.content" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- </uni-swiper-dot> -->
		<view class="detail">
			<view class="goods-price">
				<view v-if="isDiscount" class="discount">
					<view class="left">
						<view> 折扣价￥<span>{{preferentialPrice}}</span>
							<view>{{discount}}折</view>
						</view>
						<view class="discount-line"> 价格￥{{amount}} </view>
					</view>
					<view class="right">
						<view>
							<image src="https://images.linglinggong.net/XCX/gongzhuang/time.png" mode=""></image>限时折扣
						</view>
						<view> 折扣还有 {{discountGoodsTime}} 结束</view>
					</view>
				</view>
				<view v-else class="undiscount">
					<span>价格￥</span><span>{{amount}}</span>
				</view>
			</view>
			<view class="goods-title">2件装 找零工新款长袖罩衣或舒适短T </view>
		</view>
		<view class="buttom">
			<view class="title">
				<view></view>商品详情<view></view>
			</view>
			<view class="fill1">
			</view>
			<view class="buttom-img">
				<image src="https://images.linglinggong.net/static/gongzhuang/detail6.jpg" mode=""></image>
			</view>
			<view class="fill2">
			</view>
			<view class="buttom-img1">
				<image src="https://images.linglinggong.net/static/gongzhuang/detail2.png" mode=""></image>
			</view>
			<view class="directions"> 工装售出后不支持退换货 </view>
			<view class="btn-bg">
				<view class="btn" @click="showAddress()"> 立即购买 </view>
			</view>
		</view>
		<view class="mask" @touchmove.prevent v-if="isAddress">
			<view class="inner">
				<image @click="closeAddress" class="closeAddress"
					src="https://images.linglinggong.net/XCX/gongzhuang/closeAddress.png" mode="">
				</image>
				<view class="title"> 添加收件地址 </view>
				<view class="item">
					<span>收货人</span>
					<input v-model="name" placeholder="请输入收货人姓名" placeholder-style="color:#A5A5A5" maxlength="10"
						type="text">
				</view>
				<view class="item">
					<span>手机号</span>
					<input v-model="phone" placeholder="请输入收货人手机号" placeholder-style="color:#A5A5A5" maxlength="11"
						type="text">
				</view>
				<view class="item">
					<span>地址</span>
					<view class="item-address">
						<AddressPicker style="width: 380rpx;" @change="change" :level="3">{{planLocate}}
						</AddressPicker>
						<uni-icons type="forward" size="18"></uni-icons>
					</view>
				</view>
				<view class="item">
					<span>详细地址</span>
					<input v-model="addressDetail" placeholder="如街道、门牌号等" placeholder-style="color:#A5A5A5" type="text">
				</view>
				<view class="confirm" @click="submit()"> 确认 </view>
			</view>
		</view>
		<u-popup :show="isShowSize" ref="popup" type="bottom">
			<view class="order-detail" @touchmove.stop.prevent>
				<view class="top">
					<view class="head">
						<view></view>
						<view class="title"> 确认订单 </view>
						<view class="icon" @click="iconshow">
							<u-icon name="close"></u-icon>
						</view>
					</view>
					<view class="userinfo">
						<view class="left">
							<view class="user">
								<span>{{name}}</span>
								<span>{{phone}}</span>
							</view>
							<view class="user-address">
								{{wholeAddress}}
							</view>
						</view>
						<view class="right">
							<uni-icons @click="editAddress()" type="forward" size="24"></uni-icons>
						</view>
					</view>
					<view class="address-line">
						<image src="https://images.linglinggong.net/XCX/gongzhuang/address-line.png" mode=""></image>
					</view>
				</view>
				<view class="center">
					<view v-if="currentTypeIndex==0" class="price">
						<span>￥{{price}}</span>
						<view class="zhe" v-show="isDiscount">{{discount}}折</view>
					</view>
					<view v-else class="price">
						<span>￥59</span>
					</view>
					<view class="buy-num">
						<image @click="sub()" src="https://images.linglinggong.net/XCX/gongzhuang/reduce.png" mode="">
						</image>
						<span>{{num}}</span>
						<image @click="add()" src="https://images.linglinggong.net/XCX/gongzhuang/add.png" mode="">
						</image>
					</view>
					<view class="select-size"> 已选择: <span v-if="currentTypeIndex==0">{{selectGoods}}</span> <span
							v-else>缺货，请补货后再购买</span></view>
				</view>
				<view class="buttom">
					<view class="big-title">规格</view>
					<view class="size-list">
						<view @click="selectType(item,index)"
							:class="[currentTypeIndex==index?'active':'','size-item'] " v-for="(item,index) in typeList"
							style="width: 260rpx;padding-left: 0;padding-right: 0;">
							{{item.name}}
						</view>
					</view>
					<view class="big-title">尺码</view>
					<view class="size-list">
						<view @click="selectSize(item,index)" :class="[currentIndex==index?'active':'','size-item'] "
							v-for="(item,index) in sizeList[currentTypeIndex]">
							{{item.name}}
						</view>
					</view>
					<view v-if="currentTypeIndex==0" class="pay" @click="pay()"> 立即购买￥{{price*100*num/100}} </view>
					<view v-else class="pay" style="background-color: #AAAAAA;"> 立即购买￥{{59*num}} </view>
				</view>
			</view>
		</u-popup>
		<ChangePay @closePayPage='closePayPage' v-if="isOpenModal" title='支付' :monery='(price*num).toFixed(2)'
			:url="`/t/user/purchase_clothing`" keyWorld='commodityPrice' :contnet="contnet" isJson='1' buycode=1
			@paySuccess='paySuccess'>
		</ChangePay>
	</view>
</template>
<script>
	import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue"
	export default {
		data() {
			return {
				isAddress: false,
				name: '',
				addressDetail: '',
				phone: '',
				planLocate: "浙江省-金华市-义乌市",
				wholeAddress: '', //完整地址
				num: 1, //购买数量
				isDiscount: false, // 工装是否折扣
				preferentialPrice: '', // 打折后的价格
				amount: '', // 未打折的价格
				price: '', // 打折后的价格或未打折的价格
				discount: '', // 打几折
				discountExpirationTime: '', //促销截止时间
				sizeList: [
					[{
						id: 1,
						name: '小号 150-170cm'
					}, {
						id: 2,
						name: '中号 165-175cm'
					}, {
						id: 3,
						name: '大号 175-220cm'
					}],
					[{
						id: 1,
						name: 'S 85-100斤 2件'
					}, {
						id: 2,
						name: 'M 100-110斤 2件'
					}, {
						id: 3,
						name: 'L 110-120斤 2件'
					}, {
						id: 4,
						name: 'XL 120-135斤 2件'
					}, {
						id: 5,
						name: 'XXL 135-150斤 2件'
					}, {
						id: 6,
						name: 'XXXL 150-175斤 2件'
					}]
				],
				typeList: [{
					id: 1,
					name: '罩衣2件'
				}, {
					id: 2,
					name: '短袖2件'
				}],
				currentIndex: 0,
				selectGoods: '', // 选中的尺码
				isOpenModal: false, // 是否打开支付弹窗
				focus: false, //键盘输入焦点
				isShowPassWordAnimation: false, //密码错误执行动画
				codeArr: [], //密码
				codeIndex: 1,
				ranges: [1, 2, 3, 4, 5, 6],
				isShowForgetPassword: false, //是否弹出忘记密码
				payType: 2, // 余额支付
				payPwd: '',
				info: [{
					content: 'https://images.linglinggong.net/static/gongzhuang/banner1.png'
				}, {
					content: 'https://images.linglinggong.net/static/gongzhuang/banner2.png'
				}, {
					content: 'https://images.linglinggong.net/static/gongzhuang/10.jpg'
				}, {
					content: 'https://images.linglinggong.net/static/gongzhuang/9.jpg'
				}, {
					content: 'https://images.linglinggong.net/static/gongzhuang/banner6.png'
				}, {
					content: 'https://images.linglinggong.net/static/gongzhuang/banner5.png'
				}, {
					content: 'https://images.linglinggong.net/static/gongzhuang/banner7.png'
				}, {
					content: 'https://images.linglinggong.net/static/gongzhuang/banner8.png'
				}],
				current: 0,
				mode: 'default',
				dotsStyles: {},
				discountGoodsTime: '',
				isShowModal: false,
				goodsObj: {},
				contnet: {},
				timer: '',
				isShowSize: false,
				currentTypeIndex: 0
			};
		},
		components: {
			AddressPicker,
		},
		watch: {
			isDiscount: {
				handler(newIsDiscount, oldIsDiscount) {
					if (!newIsDiscount) {
						this.price = this.amount
					} else {
						this.price = this.preferentialPrice
					}
				}
			}
		},
		onUnload() {
			clearInterval(this.timer)
		},
		onShow() {
			this.getPrice()
		},
		onShareAppMessage() {
			return {
				title: "在家找日结兼职，工种齐全",
				desc: "免费使用，提前在家找日结兼职",
				path: `/pages/start-n/start-n`,
				imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
				success: res => {}
			}
		},
		methods: {
			selectType(item, index) {
				this.currentTypeIndex = index
				this.currentIndex = 0
				this.selectGoods = this.sizeList[this.currentTypeIndex][0].name
			},
			// 付款成功
			paySuccess() {
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/syncAppNewPage/buy-clothing/buy-success/buy-success'
					})
				}, 300)
			},
			// 关闭付款
			closePayPage() {
				this.isOpenModal = false
			},
			add() {
				this.num++
			},
			sub() {
				if (this.num > 1) {
					this.num--
				}
			},
			async getPrice() {
				let res = await this.$fetch(this.$api.obtain_tooling_prices, {}, 'GET')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.amount = res.data.amount
				this.preferentialPrice = res.data.preferentialPrice
				this.discount = Number(res.data.discounts) / 10
				this.discountExpirationTime = res.data.discountExpirationTime
				this.setTime()
				this.timer = setInterval(() => {
					this.setTime()
				}, 1000)
				if (this.isDiscount) {
					this.price = this.preferentialPrice
				} else {
					this.price = this.amount
				}
			},
			//倒计时
			setTime() {
				if (!this.discountExpirationTime) {
					return
				}
				let oldtIME = new Date(this.discountExpirationTime).getTime()
				let timestemp = parseFloat(oldtIME) //开工时间
				let timestempday = parseFloat((new Date()).getTime()); //当前时间
				let leftTime = parseFloat(timestemp - timestempday);
				if (leftTime >= 0) {
					this.isDiscount = true;
					let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
					let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
					let m = Math.floor(leftTime / 1000 / 60 % 60);
					let s = Math.floor(leftTime / 1000 % 60);
					if (d >= 1) {
						this.discountGoodsTime = d + '天'
					} else if (d < 1) {
						this.discountGoodsTime = h + '时'
						if (h < 1) {
							this.discountGoodsTime = m + '分' + s + '秒'
						}
					}
				} else {
					this.discountExpirationTime = '';
					this.isDiscount = false;
				}
			},
			// 滑动指示点
			swiperChange(e) {
				this.current = e.detail.current;
			},
			toOrders() {
				uni.navigateTo({
					url: '/pages/syncAppNewPage/buy-clothing/order-message/order-message'
				})
			},
			closeAddress() {
				this.isAddress = false
			},
			showAddress() {
				if (uni.getStorageSync('addressObj')) {
					let a = uni.getStorageSync('addressObj').planLocate.split('-').join('')
					this.wholeAddress = a + uni.getStorageSync('addressObj').addressDetail
					this.name = uni.getStorageSync('addressObj').name
					this.phone = uni.getStorageSync('addressObj').phone
					this.selectGoods = this.sizeList[this.currentTypeIndex][0].name
					this.addressDetail = uni.getStorageSync('addressObj').addressDetail
					this.currentIndex = 0
					this.isShowSize = true
				} else {
					this.name = ''
					this.phone = ''
					this.planLocate = '浙江省-金华市-义乌市'
					this.addressDetail = ''
					this.currentIndex = 0
					this.isAddress = true
				}
			},
			change(result) {
				console.log(JSON.stringify(result.data));
				this.planLocate = ''
				result.data.forEach((item, index) => {
					if (index === 0) {
						this.planLocate += item.name
					} else {
						this.planLocate += '-' + item.name
					}
				})
				let arr = this.planLocate.split('-');
				console.log(arr)
			},
			submit() {
				if (!this.name.trim()) {
					uni.showToast({
						title: "请输入收货人姓名",
						icon: 'none'
					})
				} else if (!(/^[1][3456789][0-9]{9}$/.test(this.phone))) {
					uni.showToast({
						title: "手机号码有误，请重填",
						icon: 'none'
					})
				} else if (this.planLocate == "请选择地址") {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none'
					})
				} else if (!this.addressDetail.trim()) {
					uni.showToast({
						title: "请输入详细地址",
						icon: 'none'
					})
				} else {
					var addressObj = {
						name: this.name,
						phone: this.phone,
						planLocate: this.planLocate,
						addressDetail: this.addressDetail
					}
					uni.setStorageSync('addressObj', addressObj)
					let a = this.planLocate.split('-').join('')
					this.wholeAddress = a + this.addressDetail
					this.isAddress = false
					this.selectGoods = this.sizeList[this.currentTypeIndex][0].name
					this.isShowSize = true
				}
			},
			iconshow() {
				this.isShowSize = false
			},
			selectSize(item, index) {
				this.currentIndex = index
				this.selectGoods = this.sizeList[this.currentTypeIndex][index].name
			},
			editAddress() {
				this.isShowSize = false
				setTimeout(() => {
					this.isAddress = true
				}, 500)
			},
			pay() {
				this.isShowSize = false
				this.contnet = {
					consignee: uni.getStorageSync('addressObj').name,
					phonenumber: uni.getStorageSync('addressObj').phone,
					address: uni.getStorageSync('addressObj').planLocate.split('-').join(''),
					detailedAddress: uni.getStorageSync('addressObj').addressDetail,
					productId: '',
					tradeName: this.selectGoods,
					productSpecifications: `罩衣${this.selectGoods}`,
					commodityPrice: this.price,
					purchaseQuantity: this.num,
					expressCompany: '',
					trackingNumber: '',
					notes: ''
				}
				this.isOpenModal = true
				this.focus = true
			},
			handleCloseModal() {
				this.isOpenModal = false
				this.payPwd = ''
				this.codeArr = []
				this.codeIndex = 1
			},
			emptyInput() {
				this.isShowPassWordAnimation = true
				this.isShowForgetPassword = true
				this.payPwd = ''
				this.codeArr = []
				this.codeIndex = 1
				setTimeout(() => {
					this.isShowPassWordAnimation = false
				}, 1200)
			},
		},
	}
</script>
<style lang="less" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		height: 100%;
		color: #262626;
		background: #fff;
		overflow-x: hidden;

		.fixTab {
			position: fixed;
			top: 20rpx;
			right: 0;
			z-index: 999;
			height: 68rpx;
			line-height: 68rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, .7);
			border-radius: 36rpx 0rpx 0rpx 36rpx;
			padding: 0 30rpx;
		}

		.fixBannerNum {
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			z-index: 1;
			color: #4D4D4D;
			font-weight: bold;
		}

		.top-img {
			width: 100%;
			height: 636rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.detail {
			.goods-price {
				.discount {
					width: 100%;
					height: 136rpx;
					background: url('https://images.linglinggong.net/XCX/gongzhuang/discount.png') no-repeat top center;
					background-size: cover;
					color: #fff;
					display: flex;
					justify-content: space-between;
					padding: 15rpx 30rpx;
					box-sizing: border-box;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						view:nth-child(1) {
							font-size: 28rpx;
							display: flex;
							align-items: center;

							span:nth-child(1) {
								font-size: 48rpx;
								font-weight: bold;
							}

							view {
								width: 120rpx;
								height: 40rpx;
								line-height: 40rpx;
								text-align: center;
								border-radius: 30rpx;
								background: #fff;
								color: #FE4538;
								margin-left: 10rpx;
							}
						}

						.discount-line {
							text-decoration: line-through;
						}
					}

					.right {
						color: #FE4538;
						text-align: right;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						view:nth-child(1) {
							font-size: 36rpx;
							font-weight: bold;
							display: flex;
							justify-content: end;

							image {
								width: 32rpx;
								height: 32rpx;
								margin-right: 10rpx;
								align-self: center;
							}
						}

						view:nth-child(2) {
							background: rgba(255, 255, 255, 0.85);
							height: 50rpx;
							font-size: 20rpx;
							line-height: 50rpx;
							border-radius: 6rpx;
							text-align: center;
							padding: 0 20rpx;
						}
					}
				}

				.undiscount {
					height: 56rpx;
					width: 100%;
					padding: 20rpx 30rpx 0rpx 30rpx;
					line-height: 56rpx;
					color: #F85A41;
					font-size: 28rpx;
					font-weight: bold;

					span:nth-child(2) {
						font-size: 40rpx;
						padding-right: 10rpx;
					}
				}
			}

			.goods-title {
				width: 100%;
				height: 104rpx;
				background: #fff;
				padding: 30rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				color: #262626;
			}
		}

		.buttom {
			.title {
				font-size: 24rpx;
				color: #999999;
				background: #F1F1F5;
				height: 94rpx;
				font-weight: bold;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				view {
					width: 30rpx;
					height: 2rpx;
					background: #CCCCCC;
					margin: 0 20rpx;
				}
			}

			.fill1 {
				height: 160rpx;
				background-color: #FFFFFF;
			}

			.fill2 {
				height: 80rpx;
				background-color: #FFFFFF;
			}

			.buttom-img {
				width: 100%;
				height: 4000rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.buttom-img1 {
				width: 100%;
				height: 3800rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.directions {
				width: 690rpx;
				margin: 80rpx auto;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				padding-bottom: 150rpx;
			}

			.btn-bg {
				width: 100%;
				background: #fff;
				position: fixed;
				bottom: 0rpx;

				.btn {
					width: 690rpx;
					height: 88rpx;
					margin: 10rpx 30rpx;
					margin-bottom: 60rpx;
					font-size: 36rpx;
					font-weight: bold;
					text-align: center;
					line-height: 88rpx;
					color: #333333;
					background: #FCC928;
					border-radius: 12rpx;
				}
			}
		}

		.mask {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, .5);
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;

			.inner {
				width: 630rpx;
				height: 804rpx;
				padding: 40rpx 30rpx;
				background: #fff;
				border-radius: 24rpx;
				position: relative;

				.closeAddress {
					width: 72rpx;
					height: 72rpx;
					position: absolute;
					right: -36rpx;
					top: -36rpx;
				}

				.title {
					font-size: 40rpx;
					color: #262626;
					font-weight: bold;
					text-align: center;
					margin-bottom: 20rpx;
				}

				.item {
					height: 120rpx;
					font-size: 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx solid #E4E4E4;

					.item-address {
						width: 65%;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					span {
						color: #1A1A1A;
						font-weight: bold;
					}

					input {
						width: 65%;
						height: 50rpx;
					}
				}

				.confirm {
					width: 630rpx;
					height: 88rpx;
					font-size: 36rpx;
					position: absolute;
					bottom: 60rpx;
					font-weight: bold;
					text-align: center;
					line-height: 88rpx;
					background: #FCC928;
					border-radius: 12rpx
				}
			}
		}

		.order-detail {
			width: 100%;
			height: 1320rpx;
			box-sizing: border-box;
			background: #F1F1F5;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			position: relative;

			.top {
				width: 100%;
				height: 364rpx;
				padding: 50rpx 30rpx;
				background: #fff;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				box-sizing: border-box;
				position: relative;

				.head {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 50rpx;

					.title {
						font-size: 40rpx;
						font-weight: bold;
					}

					.icon {}
				}

				.userinfo {
					width: 100%;
					height: 180rpx;
					display: flex;
					justify-content: space-between;
					padding: 14rpx 0;

					.left {
						width: 606rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.user {
							span {
								margin-right: 30rpx;
							}
						}
					}

					.right {
						align-self: center;

						image {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}

				.address-line {
					position: absolute;
					bottom: 24rpx;
					left: 0;
					width: 100%;
					height: 8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.center {
				width: 100%;
				height: 236rpx;
				margin-top: 20rpx;
				background: #fff;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.price {
					color: #F85A41;
					font-size: 48rpx;
					font-weight: bold;
					display: flex;
					align-items: center;

					.zhe {
						font-size: 20rpx;
						height: 32rpx;
						padding: 0 16rpx;
						margin-left: 10rpx;
						line-height: 32rpx;
						text-align: center;
						font-weight: normal;
						color: #fff;
						background-color: #F85A41;
						border-radius: 16rpx;
					}
				}

				.buy-num {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 30rpx;
						margin-left: 5rpx;
					}

					span {
						margin-right: 30rpx;
					}
				}

				.tabs {
					span {
						height: 36rpx;
						padding: 0 15rpx;
						color: #F85A41;
						border: 2rpx solid #F85A41;
						border-radius: 6rpx;
						margin-right: 12rpx;
					}
				}

				.select-size {
					span {
						font-weight: bold;
						margin-left: 20rpx;
					}
				}

				.num {
					display: flex;
					align-items: center;

					span {
						margin-right: 30rpx;
					}

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 30rpx;
					}
				}
			}

			.buttom {
				width: 100%;
				height: 680rpx;
				background: #fff;
				margin-top: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
				position: relative;

				.big-title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.size-list {
					margin: 20rpx auto 20rpx auto;
					display: flex;
					justify-content: start;
					flex-wrap: wrap;

					.size-item {
						height: 56rpx;
						padding: 5rpx 30rpx;
						border-radius: 6rpx;
						background: #F1F1F5;
						text-align: center;
						line-height: 56rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
					}

					.active {
						background: #FCC928;
					}
				}

				.pay {
					width: 690rpx;
					height: 88rpx;
					font-size: 36rpx;
					position: absolute;
					bottom: 60rpx;
					font-weight: bold;
					text-align: center;
					line-height: 88rpx;
					background: #FCC928;
					border-radius: 12rpx
				}
			}
		}

		.share-modal {
			z-index: 11;
			position: fixed;
			bottom: 0;
			height: 100vh;
			width: 100vw;
			background-color: rgba(0, 0, 0, 0.40);
			display: flex;
			align-items: center;
			justify-content: center;

			&>.main {
				position: relative;
				top: -100rpx;
				width: 570rpx;
				// height: 250rpx;
				padding: 30rpx;
				background: #FFFFFF;
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
				border-radius: 17px;
				line-height: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				&>.modal-title {
					font-size: 32rpx;
					font-weight: 600;
					margin-top: 20rpx;

					// margin: 30rpx 0 50rpx;
					&>.imgs {
						position: relative;

						image {
							position: absolute;
							top: 0rpx;
							bottom: 0;
							right: -80rpx;
							width: 50rpx;
							height: 40rpx;
						}
					}
				}

				.modal-content {
					width: 100%;
					height: 240rpx;

					// border: 1px solid;
					.modal-content-line {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 30rpx 30rpx;
					}

					.modal-content-money {
						width: 100%;
						height: 100rpx;
						margin-top: -10rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						// border:1px solid;
						.rmb {
							font-size: 40rpx;
							color: #333333;
							margin-right: 10rpx;
							font-weight: 600;
							margin-top: 15rpx;
						}

						.rmb-num {
							font-size: 66rpx;
							color: #333333;
							font-weight: 600;
						}
					}

					.modal-content-type {
						width: 92%;
						margin: 0 auto;
						height: 80rpx;
						// border: 1px solid;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.modal-content-type-left {}

						.modal-content-type-right {
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 40rpx;
								height: 100%;
							}

							text {
								margin-left: 6rpx;
								color: #333333;
								font-size: 26rpx;
							}
						}
					}
				}

				&>.pay-code {
					padding-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					position: relative;

					&>input {
						position: absolute;
						top: 0;
						left: -100%;
						width: 200%;
						height: 100%;
						text-align: left;
						z-index: 9;
						opacity: 1;
					}

					&>.box {
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						width: 80rpx;
						height: 80rpx;
						margin-right: 10rpx;
						font-size: 22px;
						line-height: 90rpx;
						box-sizing: border-box;
						background-color: #F2F2F2;
						border-radius: 2px;

						&:last-child {
							margin-right: 0;
						}
					}

					&>.active {
						border: 2rpx solid #cccccc;

						@keyframes twinkling {
							0% {
								opacity: 0.1;
							}

							50% {
								opacity: 0.8;
							}

							100% {
								opacity: 0.1;
							}
						}

						&>.line {
							display: block;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
							width: 2upx;
							height: 40upx;
							background: #333333;
							animation: twinkling 1s infinite ease;
						}
					}
				}

				.repwd {
					height: 62rpx;
					margin-bottom: -30rpx;
					font-size: 24rpx;
					color: #999999;
					// border: 1px solid;
					width: 92%;
					margin: 0 auto;
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}

				&>.button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 180rpx;
					height: 70rpx;
					margin-top: 60rpx;
					border-radius: 50rpx;
					background-color: #FCC928;

					&:active {
						opacity: 0.7;
					}
				}

				&>.close {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					width: 42rpx;
					height: 42rpx;
				}
			}
		}

		.errorpw {
			animation: swing 1s .15s linear 1;
		}

		@keyframes swing {

			10%,
			90% {
				transform: translate(-4rpx, 0);
			}

			20%,
			80% {
				transform: translate(+4rpx, 0);
			}

			30%,
			70% {
				transform: translate(-6rpx, 0);
			}

			40%,
			60% {
				transform: translate(+6rpx, 0);
			}

			50% {
				transform: translate(-8rpx, 0);
			}
		}
	}
</style>